<template>
	<view class="page">

		<view class="card card--full">
            <view class="card__head">
                <text class="card__title">基础资料-必填</text>
            </view>
            <view class="form">
				<view class="form__cell">
				    <view class="form__label">审核状态</view>
				    <view  class="form__field">
				        未审核
				    </view>
				</view>
				<view class="form__cell">
				    <view class="form__label">公司性质</view>
					<view>
						<picker @change="gsxzChange" :value="indexa" :range="gsxzList"> 
							<view class="uni-input common-right" >{{gsxzList[indexa]}}</view>
						</picker>
					</view>
				</view>
                <view class="form__cell">
                    <view class="form__label">企业类型</view>
                    <view>
						<picker mode="selector" :value="indexb" :range-key="'pic'" :range="gslxList" @change="gslxChange">
							<view class="uni-input common-right" >{{gslxList[indexb].pic}}</view>
						</picker>
                    </view>
                </view>
                <view class="form__cell">
                    <view class="form__label">公司名称</view>
                    <input class="formInput__field formInput__field--right" v-model="data.gsmc" :disabled="is_edit" placeholder="点击输入" placeholder-style="color: #999;"/>
                </view>
                <view class="form__cell" >
                    <view class="form__label">公司税号</view>
                    <input class="formInput__field formInput__field--right" :disabled="is_edit" v-model="data.gssh" placeholder="点击输入" placeholder-style="color: #999;"/>
                </view>
				<view class="form__cell" >
				    <view class="form__label">开户银行</view>
				    <input class="formInput__field formInput__field--right" :disabled="is_edit" v-model="data.gskhh" placeholder="点击输入" placeholder-style="color: #999;"/>
				</view>
				<view class="form__cell" >
				    <view class="form__label">银行地址</view>
				    <input class="formInput__field formInput__field--right" :disabled="is_edit" v-model="data.gskhhdz" placeholder="点击输入" placeholder-style="color: #999;"/>
				</view>
				<view class="form__cell" >
				    <view class="form__label">银行账号</view>
				    <input class="formInput__field formInput__field--right" type="number" :disabled="is_edit" v-model="data.gskhzh" placeholder="点击输入" placeholder-style="color: #999;"/>
				</view>
                <view class="form__cell">
                    <view class="form__label">公司电话</view>
                    <input class="formInput__field formInput__field--right" type="number" maxlength="11" :disabled="is_edit" v-model="data.gsdh" placeholder="点击输入" placeholder-style="color: #999;"/>
                </view>

                <view class="form__cell">
                    <view class="form__label">公司地址</view>
                    <input class="formInput__field formInput__field--right" :disabled="is_edit" v-model="data.gsdz" placeholder="点击输入" placeholder-style="color: #999;"/>
                </view>
				<change-picture v-on:picpost="getpic" :piclist="piclist"></change-picture>		
				<textarea class="text-area" v-model="data.gsbz" placeholder="请输入公司简介"></textarea>
            </view>
		</view>
        <view class="foot">
            <button class="foot__btn" type="primary" @click="sendBtn()">立即认证</button>
        </view>
	</view>
</template>

<script>
    import uniIcons from '@/components/uni-icons/uni-icons.vue';
	import mpvueCityPicker from '../components/mpvue-citypicker/mpvueCityPicker.vue';
    import cpimg from "@/components/cpimg/cpimg.vue";
	import changePicture from "@/components/change-picture/change-picture.vue";
    import adFile from '@/components/ad-file/ad-file.vue';   
    import { router, toast, check, localStorage } from '@/common/util.js';
    import { secondbusiness, secondgetbusiness,uploadPic } from '@/service/getData.js';
    import { mapState, mapActions, mapMutations } from 'vuex';
	export default {
        components: {
            uniIcons,
            mpvueCityPicker,
            cpimg,
			changePicture,
			adFile
        },
		data() {
			return {
                id: null,
				outharbor:'公司证件',
				is_edit: false,
				indexa: 0,
				gsxzList:['请选择公司性质','船源企业(有船源)', '货源企业(有货源)','配件物料','资源商贸','燃油供应'],
				indexb: 0,
				gslxList:[
					{"value":"0","pic":"请选择企业类型"},
					{"value":"1201","pic":"水运物流"},
					{"value":"1202","pic":"船舶交易"},
					{"value":"1203","pic":"船舶制造"},
					{"value":"1204","pic":"船舶物件"},
					{"value":"1205","pic":"能源化工"},
					{"value":"1206","pic":"冶金矿产"},
					{"value":"1207","pic":"资源商贸"},
					{"value":"1208","pic":"食品饮料"},
					{"value":"1209","pic":"电子通讯"},
					{"value":"1210","pic":"环境保护"},
					],
                data: {
					gsxz: '',
					gslx: '',
					gslxid: '',
					gsmc: '',
					gssh: '',
					gskhh: '',
					gskhhdz: '',
					gskhzh: '',
					gsdh: '',
					gsdz: '',
					gsbz: '',
					qyflag: 0, //0未认证，1已认证
					pic1: '',
					pic2: '',
					pic3: '',
					pic4: '',
					pic5: '',
                },
				piclist: [], //企业认证查看图片
				picture:['','','','',''],

			};
		},
        computed: mapState(['userInfo', 'userAddressId', 'userAddressIndex']),
        onLoad(options) {
			this.getbusiness();
        },
        onBackPress() {
            // 退出前关闭选择器
            if (this.$refs.mpvuePicker.showPicker) {
                this.$refs.mpvuePicker.pickerCancel();
                return true;
            }
        },
		onUnload() {
            // 退出前关闭选择器
			if (this.$refs.mpvuePicker.showPicker) {
				this.$refs.mpvuePicker.pickerCancel()
			}
		},
        methods:{
            ...mapMutations(['ADDRESS_INDEX_UPDATA', 'PAGE_TEMP_ADD']),
            _goPage(url){
                router.navigateTo(url);
            },
			getpic(pic){
				console.log(pic);
				this.picture = pic;
			},
			gsxzChange: function(e) {
				// console.log('picker发送选择改变，携带值为:', e.target.value)
				this.indexa = e.target.value;
				this.data.gsxz = this.gsxzList[this.indexa];
			},
			gslxChange: function(e) {
				 console.log('picker发送选择改变，携带值为:', e.target.value)
				this.indexb = e.target.value;
				this.data.gslx = this.gslxList[this.indexb].pic;
				this.data.gslxid = this.gslxList[this.indexb].value;
			},
			getbusiness() {
				this.id = this.userInfo.uid;
				var that = this;
				console.log("id:"+this.id);
				secondgetbusiness({data:{"type":"companyinfo","uid":this.id}}).then(res => {
					let news = eval('('+res.data+')')[0];
					// console.log("判断是否认证"+JSON.stringify(news));
					if(news.stat == 1){
						// 已经认证
						this.data = news.meslist[0];
						this.data.pic1 != "" ? this.piclist.push({path: this.data.pic1,orientation: 'up'}) : '';
						this.data.pic2 != "" ? this.piclist.push({path: this.data.pic2,orientation: 'up'}) : '';
						this.data.pic3 != "" ? this.piclist.push({path: this.data.pic3,orientation: 'up'}) : '';
						this.data.pic4 != "" ? this.piclist.push({path: this.data.pic4,orientation: 'up'}) : '';
						this.data.pic5 != "" ? this.piclist.push({path: this.data.pic5,orientation: 'up'}) : '';
						
						console.log(JSON.stringify(this.piclist))
						var tem = news.meslist[0].gslxid;
						that.indexb = tem - 1200;
						var gs = news.meslist[0].gsxz;
						for(var i=0;i<that.gsxzList.length;i++){
							 // console.log(that.gsxzList[i]+gs)
							if(that.gsxzList[i] === gs){
								that.indexa = i;
							}
						}
					}
					if(this.data.qyflag == 1){
						this.is_edit = true;
					}
				})
			},
			sendBtn() {
				let send = this.data;
				if(this.indexa == 0){
				    toast.show('请选择公司性质！');
				    return;
				}
				if(this.indexb == 0){
				    toast.show('请选择企业类型！');
				    return;
				}
				if(!send.gsmc){
				    toast.show('请输入公司名称！');
				    return;
				}
				if(!send.gssh){
				    toast.show('请输入公司税号！');
				    return;
				}
				if(!send.gskhh){
				    toast.show('请输入开户银行！');
				    return;
				}
				if(send.gsdz == '' || send.gskhzh == '' || send.gskhhdz == ''){
				    toast.show('请补全基础资料！');
				    return;
				}
				if(!check.phone(send.gsdh)){
				    if(send.gsdh.length === 7){
				        toast.show('座机号码请加上区号！');
				        return;
				    }
				    toast.show('电话格式错误！');
				    return;
				}
				send.pic1= this.picture[0];
				send.pic2= this.picture[1];
				send.pic3= this.picture[2];
				send.pic4= this.picture[3];
				send.pic5= this.picture[4];
				if(send.pic1 == '' && send.pic2 == '' && send.pic3 == '' && send.pic4 == '' && send.pic5 == ''){
				    toast.show('请上传公司证件！');  
				    return;
				}
				let user = this.userInfo;
				console.log(send);
				let tem ={
					"type":"companyinfotj",
					"uid":user.uid,
					"gsmc":send.gsmc,
					"gsdh":send.gsdh,
					"gsdz":send.gsdz,
					"gsbz":send.gsbz,
					"gssh":send.gssh,
					"gskhh":send.gskhh,
					"gskhzh":send.gskhzh,
					"gskhhdz":send.gskhhdz,
					"gslx":send.gslx,
					"gslxid":send.gslxid,
					"gsxz":send.gsxz,
					"pic1":send.pic1,
					"pic2":send.pic2,
					"pic3":send.pic3,
					"pic4":send.pic4,
					"pic5":send.pic5,
				}
				toast.loading('正在提交认证信息');
				secondbusiness({data:tem}).then(res => {
					toast.hideLoading();
					console.log("企业认证结果"+res.data);
					let news = eval('('+res.data+')');
				   if(news[0].stat == 1){
			           uni.showToast({title: '信息已提交！'}); 
					   setTimeout(() => {
					   router.navigateBack();
					   }, 1200);
				    }else{
					   setTimeout(() => {
					   uni.showToast({title: '认证失败！'});
					   }, 1200); 
					   return;
				    }
				});
			}
        }
	}
</script>

<style lang="scss">
    @import '@/style/mixin/hr.scss';
    @import '@/style/page/card.scss';
    @import '@/style/page/form.scss';
    @import '@/style/page/foot.scss';
    
    .page{
        padding: 0 0 44px;
    }
    .text-area{
		border: 1upx solid #a6a6a6;
		font-size: 30upx;
		width: 92%;
		padding: 10upx 30upx;
		
	}
    .idcard{
        @include flex(between);
        
        &__cell{
            width: 320upx;
        }
        
        &__img{
            position: relative;
            width: 308upx;
            height: 228upx;
            border-radius: $uni-border-radius-sm;
            margin-bottom: $uni-spacing-col-sm;
            border: 1px dashed $uni-border-color;
        }
        
        &__picture{
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 308upx;
            height: 228upx;
            
            &--left{
                width: 228upx;
                height: 308upx;
                transform-origin: top left;
                transform: rotate(90deg) translateY(-308upx);
            }
        }
        
        &__close{
            position: absolute;
            top: $uni-spacing-col-sm;
            right: $uni-spacing-row-sm;
            z-index: 999;
        }
        
        &__txt{
            text-align: center;
            font-size: $uni-font-size-sm;
            color: $uni-text-color-grey;
        }
        
        .card__center{
            @include flex(center, center);
        }
    }
    
    .card__foot{
        position: relative;
        
        &::before{
            @include hr(top, $uni-spacing-row-base);
        }
    }
    
    .checked{
        @include flex(null, center);
        padding: 0 $uni-spacing-row-base;
        
        &__field{
            @include flex(null, center);
            height: 88rpx;
        }
    }
    
    .link{
        color: $color-sub;
    }
</style>
